<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

 <!--
    computed 和 watch之间的区别
        1.computed能完成的功能, watch都可以完成
        2.watch能完成的功能, computed不一定能完成。例如: watch可以进行异步操作
    两个重要的小原则
        1.所被vue管理的函数,最好写出普通函数, 这样this的指向才是vm 或 组件实列对象
        2.所有不被vue所管理的函数（定时器的回调函数, ajax回调函数等）最好写出箭头函数, 这样this指向才是vm 或 组件实列对象
 -->

<div id="root">

    <h2>普通写法</h2>
    <h3>今天天气很{{info}}</h3>
    <button @click="changeWeather">却换天气</button>
    <br/>
    <button @click="isHot = !isHot">却换天气(@click 可以写一些简单语句)</button>

    <h2>监视属性</h2>
    <h3>今天天气很{{infoTwo}}</h3>
    <button @click="isClod = !isClod">却换天气</button>
    <br/>

    <h2>监视属性 - 深度监视</h2>
    <h3>a的值是: {{numbers.a}}</h3>
    <button @click="numbers.a++">点击a+1</button>
    <h3>b的值是: {{numbers.b}}</h3>
    <button @click="numbers.b++">点击b+1</button>
    <br/>

</div>

<script type="text/javascript">

    new Vue({
        el: '#root',
        data: {
            isHot: true,
            isClod: true,
            numbers: {
                a: 1,
                b: 1
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            },
            infoTwo() {
                return this.isClod ? '凉爽' : '炎热'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        // 监视
        watch: {
            isClod: {
                //初始化调用handler
                immediate: true,
                // 当isClod发送改变被调用
                handler(newValue, oldValue) {
                    console.log('isClod被修改了', newValue, oldValue)
                }
            },
            // 计算属性也能监测
            /*infoTwo: {
                handler(newValue, oldValue) {
                    console.log('isClod被修改了', newValue, oldValue)
                }
            },*/
            // 简写
            infoTwo(newValue, oldValue){
                console.log('isClod被修改了', newValue, oldValue)
            },
            // 监视多级结构中某个属性的变化
            /*'numbers.a': {
                handler(newValue, oldValue) {
                    console.log('numbers.a 修改了', newValue, oldValue)
                }
            },*/
            numbers: {
                // 开启深度监视
                deep: true,
                handler(newValue, oldValue) {
                    console.log('numbers 修改了', JSON.stringify(newValue), JSON.stringify(oldValue))
                }
            }
        }

    })

</script>
</body>
</html>